/**
 * Created by 居胜 on 2016/7/25.
 * 
 * 利用jquery + css3 动画实现天猫官网的侧边栏效果
 *
 * 1. 涉及较多的事件代理， 更好的练习 jquery 写法
 * 
 * 3. 因为是用CSS3实现动画，增删类名过于频繁，就可能显得逻辑有些混乱，后面画一张流程图可能会好些
 * 
 * 4。对于和 样式表中的解耦，不太好，样式表有些值写的有些死，
 *    比如如果content面板每个的大小不一样，在切换那又要改下，样式表中也不应该写定值
 *
 */
(function () {
    var SideMenu = function (sideBarId, closeBtnId) {

        //容器ID
        this.sideBarId = sideBarId || 'sliderbar';
        this.closeBtnId = closeBtnId || 'closeBar';

        //容器
        this.$sideBar = $('#' + this.sideBarId);
        this.$menuList = $('#'+ this.sideBarId + ' .item');

        //侧边栏状态
        this.state = "allClosed";

        var self = this;

        self.initMenuList();    //为item添加鼠标 click 事件

        self.clickOther();      //点击空白区域，隐藏侧边栏
    };

    SideMenu.prototype = {

        //为item添加鼠标hover, click事件
        initMenuList : function () {

            var self = this;

            self.$menuList.each(function (i, elem) {

                //点击sideBar图标
                $(elem).on('click', function (event) {

                    //需要显示的content面板
                    var $nowContent = $('#'+ event.currentTarget.id + '-content');

                    //面板全部关闭状态，初始化显示
                    if(self.state == "allClosed"){
                        self.showContent($nowContent);
                        self.state = "opened";
                        self.$lastContent = $nowContent;

                        //面板打开，前后点击同一按钮，关闭面板
                    }else if(self.state == 'opened' && self.$lastContent.attr('id') == $nowContent.attr('id')){

                        self.hideContent($nowContent);
                        self.state = "allClosed";
                        self.$lastContent = null;

                        //面板切换
                    }else if(self.state == 'opened'&& self.$lastContent.attr('id') !== $nowContent.attr('id')){

                        self.changeContent($nowContent, self.$lastContent );
                        self.$lastContent = $nowContent;
                    }
                });
            });
        },

        //显示content面板
        showContent: function ($nowContent) {

            //content面板向左运动
            $nowContent.css('display', 'block').addClass('contentMoveLeft');

            //sideBar向左运动
            this.$sideBar.css('right', $nowContent.width()+'px')
        },


        //重复点击同一按钮，关闭侧边栏
        hideContent: function ($nowContent) {

            //content面板向右运动
            $nowContent.removeClass('contentMoveUp').addClass('contentMoveRight');

            //sideBar向右运动
            this.$sideBar.css('right', 0);

            $nowContent.on('animationend webkitAnimationEnd', function () {
                $nowContent.css('display', 'none').removeClass('contentMoveRight contentMoveLeft contentFadeOut');
                $nowContent.off();
            })
        },


        //切换content面板
        changeContent: function ($nowContent, $lastContent) {

            //下一个content, 向上运动
            $nowContent.css('display', 'block').addClass('contentMoveUp');

            //当前的content, 逐渐消失
            $lastContent.addClass('contentFadeOut');

            //清除上一个content,遗留的class
            $lastContent.one('animationend webkitAnimationEnd', function () {
                $lastContent.css('display', 'none').removeClass('contentMoveLeft contentMoveUp contentFadeOut');
                $lastContent.off();
            })
        },


        //点击空白区域
        clickOther : function () {
            var self = this;

            $(document).on('click', function (event) {

                var $wrap = $('#sideWrap');

                //点击的是否是空白区域
                if(!$wrap.is(event.target) && $wrap.has(event.target).length === 0 && self.state == 'opened'

                    //点击content中的关闭按钮
                    || ($(event.target).hasClass('closeBar') && self.state == 'opened')) {

                    self.hideContent(self.$lastContent);
                    self.state = 'allClosed';
                    self.$lastContent = null;
                }
            });
        }

    };


    var sideMenu = new SideMenu();
})();